<template>
    <div class="bg page-servecreate">
        <div id="serveName" class="open-picker">
        	<label>选择服务</label>
        	<p>{{serveName}}</p>
        	<i></i>
        </div>
        <div  key="menus.id" v-for="(menus,msIndex) in detail.children">
        	<div :class="[menus.selectype=='TEXT'?'input':'checkbox','item']">
	        	<div class="title">
		        	<h3>{{menus.name}}</h3>
		        	<p>{{menus.remark}}</p>
	        	</div>
	        	<ul class="text">
	        		<li key="menu.id" v-for="(menu,mIndex) in menus.children">
	        			<p v-if="menus.selectype=='SINGLE'">
		        			<label>
		        				<myradio :ds="menus.myCheckMap" :path="[msIndex]" :change="radioChange" :kw="mIndex" ></myradio>
		        			</label>
		        			{{menu.name}}
	        			</p>
	        			<p v-else-if="menus.selectype=='MULTI'">
		        			<label>
		        				<mycheckbox :ds="menus.myCheckMap" :path="[msIndex]" :getStatus="checkboxChange" :kw="mIndex" ></mycheckbox>
		        			</label>
		        			{{menu.name}}
	        			</p>
	        			<p v-else-if="menus.selectype=='TEXT'">
	        				<label>{{menu.name}}<em>*</em></label>
        					<input @input="inputChange(menu.id,true)" :ref="menu.id" type="text" placeholder="点击输入" />
	        			</p>
	        			<input @input="inputChange(menu.id)" :value="remark[menu.id]" :ref="menu.id" v-if="menu.selectype=='REMARK'" type="text" placeholder="输入备注" />
	        		</li>
	        	</ul>
        	</div>
        	
        	
        	<!--第三级节点配置-->
        	<div 
        		v-if="menu.myCheckMap && menus.myCheckMap[mIndex]" 
        		key="menu.id" 
        		v-for="(menu,mIndex) in menus.children" 
        		:class="[menu.selectype=='TEXT'?'input':'checkbox','item']">
	        	<div class="title">
		        	<h3>{{menu.nameDetail}}</h3>
		        	<p>{{menu.description}}{{JSON.stringify(menu.myCheckMap)}}</p>
	        	</div>
	        	<ul class="text">
	        		<li  key="option.id" v-for="(option,oIndex) in menu.children">
	        			<p v-if="menu.selectype=='SINGLE'">
		        			<label>
		        				<myradio :ds="menu.myCheckMap" :path="[msIndex,mIndex]" :change="radioChange" :kw="oIndex" ></myradio>
		        			</label>
		        			{{option.name}}
	        			</p>
	        			<p v-else-if="menu.selectype=='MULTI'">
		        			<label>
		        				<mycheckbox :ds="menu.myCheckMap" :path="[msIndex,mIndex]" :getStatus="checkboxChange" :kw="oIndex" ></mycheckbox>
		        			</label>
		        			{{option.name}}
	        			</p>
	        			<p v-else-if="menu.selectype=='TEXT'">
	        				<label>{{option.name}}<em>*</em></label>
        					<input @input="inputChange(option.id,true)" :ref="option.id" type="text" placeholder="点击输入" />
	        			</p>
	        			<input @input="inputChange(option.id)" :value="remark[option.id]" :ref="option.id" v-if="option.selectype=='REMARK'" type="text" placeholder="输入备注" />
	        		</li>
	        	</ul>
	        </div>
	        
        </div>
        
        <div id="choseTime" class="open-picker">
        	<label>预期进场时间</label>
        	<p>{{expectInDate||'请选择时间'}}</p>
        	<i></i>
        </div>
        
        <div class="btn-cont">
        	<button @click="submit">提交</button>
        </div>
    </div>
</template>

<script>
import http from '../services/http';
import mycheckbox from "../components/mycheckbox.vue";
import myradio from "../components/myradio.vue";
import myTimePiker from '../assets/js/myTimePiker';
import myAsyncPiker from '../assets/js/myAsyncPiker';
import { mapState } from 'vuex';
	
export default {
	name:'serve-create',
    data() {
      return {
      	detail: {},
      	expectInDate: "",
      	serveName: "",
      	menuMap: {},//独立map
      	optionsMap: {},
      	remark: {},
      	textremark: {},
      	serveId: null,
      	vendorId:null,
      	vendorMobile:null,
      }
    },
    computed:{
    	...mapState({
    		token: state => state.user.token,
    		userinfo: state => state.user.userinfo,
    		menuList: state => state.serve.menuList,
    	})
    },
    props:['toast'],
    created(){
		this.serveName = this.$route.query.serveName;
		this.serveId = this.$route.query.serveId;
		this.vendorId = this.$route.query.vendorId;
		this.vendorMobile = this.$route.query.vendorMobile;
		this.getDetailById(this.serveId);
	},
    mounted() {
    	const {menuList} = this;
    	myTimePiker('choseTime',this,"expectInDate");
    	this.$store.dispatch({ type: 'getMenuList' }).then(data=>{
    		let dataSource = [];
    		Object.keys(data).forEach(item=>{
    			item = data[item];
    			let options = {
    				name:item.name,
    				id:item.id,
    				type:1,
    				sub:[],
    			};
    			item.sub.forEach(child=>{
    				options.sub.push({
    					id:child.id,
    					name:child.name,
    					type:0
    				})
    			});
    			dataSource.push(options);
    		})
    		myAsyncPiker('serveName',dataSource,[0, 0],data=>{
    			this.$set(this.$data,'serveName',data[1].text);
    			this.serveId = data[1].id;
    			this.getDetailById(this.serveId);
    		});
    	});
	},
	methods: {
		getDetailById(serveId){
			http.get("/isp/api/v1/public/service/getDetailById",{
				id: serveId
			}, (redata) => {
				let menuMap = [];
				redata.data.children.forEach(menus=>{
					menus.myCheckMap = {};
					menus.children.forEach(menu=>{
						if(menu.children && menu.children.length>0){
							menu.myCheckMap = {};
						}
					})
				})
				this.$set(this.$data,'detail',redata.data);
			})
		},
		/*
		 * data:目标节点的chcckmap;
		 * cleanChild:是否清空同级别的子级;
		 * */
		dataSet(detail,data,path,cleanChild){
			if(path.length==1){
				/*重置当前层级下所有menumap，并设置目标menu*/
				if(cleanChild){
					detail.children[path[0]].children.forEach((menu,mindex)=>{
						if(menu.myCheckMap){//清空子级所有
							detail.children[path[0]].children[mindex].myCheckMap={}
						}
					})
				};
				detail.children[path[0]].myCheckMap = {...data};
			}else if(path.length==2){
				detail.children[path[0]].children[path[1]].myCheckMap = {...data};
			}
			return detail;
		},
		radioChange(data, path, kw) {
			this.detail = {...this.dataSet(this.detail,data,path,true)};
		},
		checkboxChange(status, kw, data, path) {
			data[kw] = status;
			this.detail = {...this.dataSet(this.detail,data,path)};
		},
		inputChange(id,textstatus){
			if(textstatus){//填空
				let { textremark } = this; 
				textremark[id] = this.$refs[id][0].value;
				textremark = {...textremark};
			}else{//备注
				let { remark } = this; 
				remark[id] = this.$refs[id][0].value;
				remark = {...remark};
			}
		},
		getEffectIds(item){
			let ids = [];
			Object.keys(item.myCheckMap).forEach(index=>{
				if(item.myCheckMap[index]){
					ids.push(item.children[index].id);
				}
			})
			return ids;
		},
		submit(){
			const {
				detail, 
				remark, 
				getEffectIds, 
				serveId, 
				expectInDate,
				toast,
				userinfo,
				vendorId,
				vendorMobile,
				textremark,
			} = this;
			
			let servDetail = [];
			let remarkEffect = {};
			detail.children.forEach(menus=>{
				servDetail = servDetail.concat(getEffectIds(menus));
				menus.children.forEach(menu=>{
					if(menu.myCheckMap){
						servDetail = servDetail.concat(getEffectIds(menu));
					}
				})
			})
			Object.keys(remark).forEach(item=>{
				if(servDetail.indexOf(item)>=0){
					remarkEffect[item] = remark[item];
				}
			})
			remarkEffect = {...remarkEffect,...textremark};
			if(expectInDate.length<=0){
				return toast("请选择进场时间！");
			}
			if(servDetail.length<=0){
				return toast("请至少选择一项服务！");
			}
			servDetail.unshift(serveId); 
			const timeAry = expectInDate.split(".");
			const time = new Date(timeAry[0],timeAry[1],timeAry[2]);
			
			http.post("/isp/api/v1/protected/order/addOrder",{
				remark: JSON.stringify(remarkEffect),
				servDetail: servDetail.join(","),
				id: 0,//后端要求固定值
				expectInDate: time.getTime(),
				servArea: "",//本公司面积字段暂无
				vender: vendorId,//供应商字段暂无
				mobile: vendorMobile,
				userId: userinfo.account,
				orderStatus:"SUBMITED",
			},redata=>{
				if(redata.success){
					toast(redata.message);
					this.$router.push({ path: '/home/orders/orderPut?homeSelect=orders' });
				}else{
					toast(redata.message||"提交失败");
				}
			})
		}
	},
	components: {
		myradio,
		mycheckbox
	},
    beforeRouteEnter(to, from, next){
    	next(vm=>{
    		if(vm.token){
        		next();
        	}else{
        		vm.toast("请先登录！");
        		vm.$router.push({ path: '/login' });
        	}
    	})
	},
};
</script>



<style lang="scss">
.page-servecreate {
	background: #f5f5f5;
	padding-top: 10px;
	font-size: 1rem;
	
	.open-picker{
		height: 50px;
		width: 100%;	
		background: #ffffff;
		padding: 0 30px 0 15px;
		position: relative;
		line-height: 50px;
		margin-bottom: 10px;
		
		label{
			position: absolute;
			left: 15px;
			top: 0;
			display: block;
			height: 100%;
			background: #ffffff;
			width: auto;
			padding-right: 5px;
			color: #666666;
		}
		P{
			text-align: right;
			height: 100%;
			width: auto;
			right: 25px;
			color: #979797;
		}
		i{
			display: block;
			position: absolute;
			right: 15px;
			top: 0;
			height: 100%;
			width: 10px;
			background: transparent url(../assets/img/icon/register-right.png) no-repeat center / 6px auto;
		}
 
	}
	
	.item{
		background: #ffffff;
		margin-bottom: 10px;
		
		.title{
			border-bottom: solid 1px #e6e6e6;
			padding: 10px 0;
			
			h3{
				padding: 0 15px;
				height: 30px;
				line-height: 30px;
				font-weight: 600;
				text-align: left;
				width: 100%;
				overflow: hidden;
				font-size: 1.02rem;
				color: #434a4d;
				font-family: "微软雅黑";
			}
			p{
				padding: 0 15px;
				line-height: 20px;
				color: #979797;
				font-size: 0.9rem;
			}
		}
		
		&.input ul{
			padding: 0 15px;
			li{
				padding: 12px 0;
				line-height: 1.5rem;
				color: #666667;
				padding-left: 100px;
				position: relative;
				border-bottom: solid 1px #e6e6e6;
				label{
					line-height: 48px;
					position: absolute;
					display: block;
					height: 100%;
					width: auto;
					left: 0;
					top: 0;
					em{
						display: none;
						color: #ff873f;
					}
				}
				&.require em{
					display: inline;
				}
				input{
					height: 1.5rem;
					width: 100%;
					border: none;
				}
			}
		}
		
		&.checkbox ul{
			padding: 0 15px;
			li{
				border-bottom: solid 1px #e6e6e6;
				p{
					padding: 12px 0;
					line-height: 1.5rem;
					color: #666667;
					padding-left: 30px;
					position: relative;
					label{
						position: absolute;
						display: block;
						height: 100%;
						width: auto;
						left: 0;
						top: 0;
						span{
						    float: left;
    						margin-top: 15px;
						}
					}
				}
				input{
					height: 35px;
					border-radius: 4px;
					width: 100%;
					border: none;
					padding: 5px 10px;
					background: #f5f5f5;
					margin-bottom: 15px;
					border: solid 1px #e6e6e6;
				}
			}
		}
		
		&.radio ul{
			padding: 0 15px;
			li{
				border-bottom: solid 1px #e6e6e6;
				p{
					padding: 12px 0;
					line-height: 1.5rem;
					color: #666667;
					padding-left: 30px;
					position: relative;
					label{
						position: absolute;
						display: block;
						height: 100%;
						width: auto;
						left: 0;
						top: 0;
						span{
						    float: left;
    						margin-top: 15px;
						}
					}
				}
				input{
					height: 35px;
					border-radius: 4px;
					width: 100%;
					border: none;
					padding: 5px 10px;
					background: #f5f5f5;
					margin-bottom: 15px;
				}
			}
		}
	}
	
	.btn-cont{
		padding: 15px;
		button{
			width: 100%;
			border-radius: 4px;
			background: #2dbe60;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 1.1rem;
			color: #ffffff;
		}
	}
}
</style>
